<form nz-form [formGroup]="addForm" class="modal-add-form" (ngSubmit)="onSubmit($event)">
    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientId" nzRequired>客户端</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientId">客户端</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select name="clientId" formControlName="clientId" [nzAllowClear]="true" (ngModelChange)="onClientChange($event)">
                <nz-option *ngFor="let client of clients" [nzValue]="client.clientId" [nzLabel]="client.clientName"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label nzFor="roleName" [nzSm]="6" [nzXs]="24" nzRequired>角色名称</nz-form-label>
        } @else {
            <nz-form-label nzFor="roleName" [nzSm]="6" [nzXs]="24">角色名称</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="roleName" placeholder="角色名称" id="roleName" />
            <div *ngIf="submitted && fm['roleName'].invalid" class="alert">
                <div *ngIf="fm['roleName'].errors?.['rquired']">请输入角色名称</div>
                <div *ngIf="fm['roleName'].errors?.['minlength']">角色名称必须大于2个字符</div>
                <div *ngIf="fm['roleName'].errors?.['maxlength']">角色名称必须小于20个字符</div>
                </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label nzFor="roleKey" [nzSm]="6" [nzXs]="24" nzRequired>权限字符</nz-form-label>
        } @else {
            <nz-form-label nzFor="roleKey" [nzSm]="6" [nzXs]="24">权限字符</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="roleKey" placeholder="权限字符" id="roleKey" />
            <div *ngIf="submitted && fm['roleKey'].invalid" class="alert">
                <div *ngIf="fm['roleKey'].errors?.['rquired']">请输入权限字符</div>
                <div *ngIf="fm['roleKey'].errors?.['minlength']">权限字符必须大于2个字符</div>
                <div *ngIf="fm['roleKey'].errors?.['maxlength']">权限字符必须小于20个字符</div>
                </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label nzFor="orderNum" [nzSm]="6" [nzXs]="24" nzRequired>显示顺序</nz-form-label>
        } @else { 
            <nz-form-label nzFor="orderNum" [nzSm]="6" [nzXs]="24">显示顺序</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="orderNum" placeholder="显示顺序" id="orderNum" />
            <div *ngIf="submitted && fm['orderNum'].invalid" class="alert">
                <div *ngIf="fm['orderNum'].errors?.['rquired']">请输入显示顺序</div>
                <div *ngIf="fm['orderNum'].errors?.['max']">显示顺序不超过100000</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label nzFor="enabled" [nzSm]="6" [nzXs]="24">状态</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select class="role-enabled" name="enabled" formControlName="enabled">
                <nz-option [nzValue]="true" nzLabel="启用"></nz-option>
                <nz-option [nzValue]="false" nzLabel="停用"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label nzFor="remark" [nzSm]="6" [nzXs]="24">备注</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="remark" placeholder="备注" id="remark" />
        </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item>
        <nz-form-label nzFor="groupIds" [nzSm]="6" [nzXs]="24">角色组</nz-form-label>
        <nz-form-control [nzSm]="7" [nzXs]="24" >
            <nz-select [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedGroupTypeId" 
            (ngModelChange)="onGroupTypeChange($event)" style="padding-right: 5px;">
                <nz-option *ngFor="let groupType of groupTypes" [nzValue]="groupType.id" [nzLabel]="groupType.display"></nz-option>
            </nz-select>
        </nz-form-control>
        <nz-form-control [nzSm]="7" [nzXs]="24">
            <nz-select [ngModelOptions]="{standalone: true}" nzMode="multiple" [nzMaxTagCount]="3" [(ngModel)]="selectedGroupIds">
                <nz-option *ngFor="let group of groups" [nzValue]="group.groupId" [nzLabel]="group.groupName"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item> -->

    <nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="6" style="text-align: right; line-height: 1.57; justify-content: center;">
            <span style="align-content: center;">权限列表:</span>
        </div>
        <div nz-col style="border-style: solid; border-width: thin; overflow-y: scroll; max-height: 320px; min-width: 420px; margin-bottom: 24px;">
            <nz-tree style="padding-top: 10px; padding-bottom: 12px; margin: 10px 10px 20px 10px;" #nzTreeComponent [nzData]="nodes" nzCheckable
                [nzCheckedKeys]="defaultCheckedKeys" [nzSelectedKeys]="selectedKeys" [nzExpandedKeys]="expandedKeys"
                (nzClick)="nzClick($event)" (nzContextMenu)="nzClick($event)" (nzCheckBoxChange)="nzCheck($event)"
                (nzExpandChange)="nzCheck($event)">
            </nz-tree>
        </div>
    </nz-row>

    <div nz-row nzJustify="end">
        <div nz-col class="search-area">
            @if (editMode == modeEnum.ADD) {
            <button nz-button class="dialog-button" [nzType]="'primary'">新建</button>
            } @else {
            <button nz-button class="dialog-button" [nzType]="'primary'">编辑</button>
            }
            <button nz-button class="dialog-button" (click)="onCancel($event)">取消</button>
        </div>
    </div>
</form>